<template>
  <div class="monitoring flex flexdc panelWrap m-l-20 m-r-20 m-t-20">
    <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
      <div>电梯监控</div>
    </div>
    <div class="mon-container m-t-10 flex flexdc">
      <!-- 头部标题 -->
      <div class="mon-title flex flexjcsa">
        <div class="mon-content flex flex1">
          <h3 class="flex m-r-20">
            <span class="mon-reg fs16 flex flexac c444">电梯注册代码：</span>
            <el-input v-model="regCode" class="com-input fs14 c777" />
          </h3>
          <h3 class="flex">
            <span class="mon-position flex flexac fs16 c444">安装位置：</span>
            <el-input
              v-model="address"
              class="com-input address-input over fs14 c777"
            />
            <div class="war-btn m-l-20">
              <el-button @click="handleSelect(4)" type="warning">选择电梯</el-button>
            </div>
          </h3>
        </div>
        <!-- <div class="mon-btnBox">
          <el-button type="primary" class="mon-btn">返 回</el-button>
        </div> -->
      </div>
      <!-- 内容区 -->
      <div class="mon-main flex">
        <div class="mon-ele flex flexdc m-r-40">
          <div class="ele-top co-mon m-b-20">
            <div class="container cruise-video">
              <video
                id="videoId"
                controls
                :muted="muted"
                :loop="loop"
                :autoplay="autoplay"
              />
            </div>
            <div class="el-btnBox">
              <div class="btn-left flex m-t-10 m-l-20">
                <el-button type="primary" class="mon-el-btn m-r-20" @click="handleVideoStop">{{ videoMsg }}</el-button>
                <el-button type="primary" class="mon-el-btn">开始对讲</el-button>
              </div>
              <div class="btn-right flex flex1 m-t-10 m-r-20">
                <el-date-picker
                  v-model="dateValue"
                  type="date"
                  placeholder="选择日期"
                  class="mon-date m-r-20"
                />
                <el-button type="primary" class="mon-el-btn">回放</el-button>
              </div>
            </div>
          </div>
          <div class="ele-bottom co-mon">
            <Coordinate custom-class="coordinateWrap" :close-on-click-modal="false" :visible.sync="choiceCoordinate" />
          </div>
        </div>
        <div class="mon-baseInfo flex flexdc">
          <div class="base-top co-mon m-b-20">
            <ul class="flex tab1">
              <li
                v-for="item in blackClipData"
                :key="item.id"
                :class="`balck-${item.id} balck`"
              >
                <i :class="item.icon" />
                <span class="b-title m-b-10">{{ item.title }}</span>
                <span class="b-status">{{ item.info }}</span>
              </li>
            </ul>
          </div>
          <div class="base-bottom co-mon">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane v-for="item in baseInfo" :key="item.id" :label="item.label" :name="item.id">
                <div v-for="val in item.children" :key="val.id" :class="`base-tab-${val.id} base-tab flex flexjcsb p-l-10`">
                  <p class="base-p flex">
                    <span class="base-title fs14">{{ val.title }}：</span>
                    <span class="base-name fs14 c777">{{ val.name }}</span>
                  </p>
                  <p class="base-r-p m-l-10 flex">
                    <span v-if="val.layers" class="base-layers fs14">{{ val.layers }}：</span>
                    <span class="base-number fs14 c777">{{ val.number }}</span>
                  </p>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <pubSelect :stockType="2" v-model="coSelectVisible" :select-type="selectType" :title="selectTitle" @update="handleSelectUpdate" />
  </div>
</template>

<script>

import Coordinate from '@/components/coordinate'
import pubSelect from '@/components/pubSelect/index'
import flvjs from 'flv.js/dist/flv'
import { fetchMqttCommandDev } from '@/api/operation/screenInvoke'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'Monitoring',
  components: { Coordinate, pubSelect},
  data() {
    return {
      eleData:{
        registerCode:'',
        installAddress:''
      },
      coSelectVisible: false,
      selectType: 0,
      selectTitle: '',
      loop: true,
      muted: false,
      autoplay: false,
      onOff: 1,
      url: '',
      flvPlayer: null,
      videoMsg: '开始播放',
      videoElement: '',
      dateValue: '',
      choiceCoordinate: true,
      activeName: '0',
      regCode: '',
      address: '',
      blackClipData: [
        {
          id: 0,
          title: '楼层',
          info: '1',
          icon: 'iconfont icon-shijian'
        },
        {
          id: 1,
          title: '运行方向',
          info: '停止',
          icon: 'iconfont icon-guanlipingtaiicon_tongjibaobiao'
        },
        {
          id: 2,
          title: '开关门状态',
          info: '关门',
          icon: 'iconfont icon-weibiaoti7'
        },
        {
          id: 3,
          title: '检修状态',
          info: '正常',
          icon: 'iconfont icon-guanxibushu'
        },
        {
          id: 4,
          title: '运行状态',
          info: '正常',
          icon: 'iconfont icon-dianti2'
        },
        {
          id: 5,
          title: '供电中断',
          info: '正常',
          icon: 'iconfont icon-dianti1'
        },
        {
          id: 6,
          title: '是否有人',
          info: '无人',
          icon: 'iconfont icon-czIcon-elevator'
        },
        {
          id: 7,
          title: '电梯锁梯信号',
          info: '正常',
          icon: 'iconfont icon-fuwumoshi'
        },
        {
          id: 8,
          title: '超速信号',
          info: '正常',
          icon: 'iconfont icon-dianti'
        },
        {
          id: 9,
          title: '电梯消防状态信号',
          info: '正常',
          icon: 'iconfont icon-dianti1'
        },
        {
          id: 10,
          title: '电梯门区信号',
          info: '门区内',
          icon: 'iconfont icon-czIcon-elevator'
        },
        {
          id: 11,
          title: '电梯轿厢超载信号',
          info: '正常',
          icon: 'iconfont icon-fuwumoshi'
        }
      ],
      baseInfo: [
        {
          id: '0',
          label: '基础数据',
          children: [
            {
              id: 0,
              title: '电梯品牌',
              name: 'LEGY',
              layers: '',
              number: ''
            },
            {
              id: 1,
              title: '用户设备型号',
              name: 'LEGY',
              layers: '层数',
              number: '34'
            },
            {
              id: 2,
              title: '站数',
              name: 'LEGY',
              layers: '额定速度',
              number: '34'
            },
            {
              id: 3,
              title: '载重量',
              name: '1050',
              layers: '安装日期',
              number: '2010-10-12'
            },
            {
              id: 4,
              title: '安装地址',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            },
            {
              id: 5,
              title: '使用单位',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            },
            {
              id: 6,
              title: '管理负责人',
              name: '黎托路499号绿地之窗10-Y',
              layers: '联系电话',
              number: '13888888888'
            },
            {
              id: 7,
              title: '维保单位',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            }
          ]
        },
        {
          id: '1',
          label: '物联网故障历史',
          children: [
            {
              id: 0,
              title: '历史1',
              name: 'LEGY',
              layers: '',
              number: ''
            },
            {
              id: 1,
              title: '历史2',
              name: 'LEGY',
              layers: '层数',
              number: '34'
            },
            {
              id: 2,
              title: '历史3',
              name: 'LEGY',
              layers: '额定速度',
              number: '34'
            },
            {
              id: 3,
              title: '载重量',
              name: '1050',
              layers: '安装日期',
              number: '2010-10-12'
            },
            {
              id: 4,
              title: '安装地址',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            },
            {
              id: 5,
              title: '使用单位',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            },
            {
              id: 6,
              title: '管理负责人',
              name: '黎托路499号绿地之窗10-Y',
              layers: '联系电话',
              number: '13888888888'
            },
            {
              id: 7,
              title: '维保单位',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            }
          ]
        },
        {
          id: '2',
          label: '设备参数',
          children: [
            {
              id: 0,
              title: '参数1',
              name: 'LEGY',
              layers: '',
              number: ''
            },
            {
              id: 1,
              title: '参数2',
              name: 'LEGY',
              layers: '层数',
              number: '34'
            },
            {
              id: 2,
              title: '参数3',
              name: 'LEGY',
              layers: '额定速度',
              number: '34'
            },
            {
              id: 3,
              title: '载重量',
              name: '1050',
              layers: '安装日期',
              number: '2010-10-12'
            },
            {
              id: 4,
              title: '安装地址',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            },
            {
              id: 5,
              title: '使用单位',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            },
            {
              id: 6,
              title: '管理负责人',
              name: '黎托路499号绿地之窗10-Y',
              layers: '联系电话',
              number: '13888888888'
            },
            {
              id: 7,
              title: '维保单位',
              name: '黎托路499号绿地之窗10-Y',
              layers: '',
              number: ''
            }
          ]
        }
      ],
      mqtts: {
        command: 'PUSH_STREAM',
        pushStreamUrl: '',
        screenId: 0,
        serialNumber: '6C:E8:C6:2B:77:B5'
      }
    }
  },
  created() {
    // this.ip = this.$route.query.ip
    // this.channelId = this.$route.query.channelId
    this.getMqttCommandDev()
    this.$once("hook:beforeDestroy",()=>{
      console.log(this.mqtts.command)
      this.mqtts.command = 'PUSH_STREAM_STOP'
      this.getMqttCommandDev();
    })
  },
  mounted() {
    this.$storage.set('upUrl', JSON.stringify({ 'path': '/intelligentVillage/intMonitoring/eleMonitoring/index' }))
  },
  methods: {
    // 信息更新回调
    handleSelectUpdate(row) {
      switch (this.selectType) {
        case 0:
          this.form.companyId = row.id
          break
        case 1:
          this.form.productId = row.id
          break
        case 2:
          this.form.entId = row.id
          this.entName = row.entName
          break
        case 4:
          this.regCode = row.registerCode
          this.address = row.installAddress
          break
        default:
          break
      }
      // this.handleValueChange(row.id)
    },
    handleSelect(type) {
      this.coSelectVisible = true
      this.selectType = type
      switch (type) {
        case 0:
          this.selectTitle = '厂家'
          break
        case 1:
          this.selectTitle = '设备'
          break
        case 2:
          this.selectTitle = '往来单位'
          break
        case 4:
          this.selectTitle = '电梯'
          break
        default:
          break
      }
    },
    getMqttCommandDev() {
      fetchMqttCommandDev({ command: this.mqtts.command, pushStreamUrl: this.mqtts.pushStreamUrl, screenId: this.mqtts.screenId, serialNumber: this.mqtts.serialNumber }).then(res => {
        if (res.code === '000000') {
          // return res
        } else {
          // // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleClick(tab, event) {
      // console.log(tab, '===', event)
    },
    handleVideoStop() {
      if (this.onOff === 1) {
        this.videoMsg = '停止播放'
        this.onOff = 2
        this.mqtts.command = 'PUSH_STREAM'
        this.getMqttCommandDev();
        this.pushFlow()
      } else {
        this.videoMsg = '开始播放'
        this.flvPlayer.pause()
        this.onOff = 1
        this.mqtts.command = 'PUSH_STREAM_STOP'
        this.getMqttCommandDev();
      }
    },
    pushFlow() {
      if (flvjs.isSupported()) {
        this.videoElement = document.getElementById('videoId')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'http://39.107.41.165:8081/live?port=1935&app=live&stream=mystream',
          cors: true,
          isLive: true
        })
        if (this.onOff === 2) {
          this.flvPlayer.attachMediaElement(this.videoElement)
          this.flvPlayer.load()
          this.flvPlayer.play()
        }
      }
    }
  }
}
</script>

<style lang="scss">
.monitoring {
  #coordinate{
    margin-left: 0;
  }
  .tab1{
    border: 1px solid #dddddd;
    border-radius: 10px;
  }
  // width: 100%;
  .mon-container {
    .mon-main {
      .mon-ele {
        width: 50%;
        height: 50%;
        margin-left: 20px;
        .ele-top {
          height: 570px;
          // border: 1px solid #eeeeee;
          border-radius: 5px;
          .mon-el-btn {
            width: 100px;
          }
          .el-btnBox {
            width: 100%;
            display: flex;
            justify-content: center;
            .btn-left {
              width: 60%;
            }
          }
          #videoId {
            width: 100%;
            height: 500px;
            border-radius: 5px;
            object-fit: fill;
          }
        }
        .mon-date {
          width: 200px;
        }
        .ele-bottom {
          flex: 1;
          margin-bottom: 20px;
          .title,
          .searchSite,
          .sdasdasdsa {
            display: none;
          }
          .bm-view {
            // width: 540px;
            height: 500px;
          }
          .anchorBL {
            display: none;
          }
        }
      }
      .mon-baseInfo {
        width: 50%;
        margin-right: 20px;
        .base-top {
          height: 570px;
          ul {
            height: 500px;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
            // margin-left: 6px;
            .balck {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 180px;
              height: 140px;
              border-radius: 5px;
              .b-title{
                font-size: 14px;
                color: #1eb9e3;
                margin-top: 14px;
              }
              .b-status{
                color: #0798bf;
                font-weight: bold;
              }
              i {
                height: 30px;
                line-height: 30px;
                color: #1eb9e3;
                font-size: 50px;
              }
            }
          }
        }
        .base-bottom {
          height: 500px;
          margin-right: 20px;
          .el-tabs__header {
            margin: 0;
          }
          .base-tab {
            // height: 37px;
            line-height: 6px;
            border: 1px solid #eeeeee;
            .base-p {}
            .base-r-p {
              flex: 1;
            }
            .base-title {
              width: 120px;
              text-align: right;
            }
            .base-name {
              width: 210px;
            }
            .base-layers {
              width: 80px;
              text-align: right;
            }
            .base-number {}
          }
          .base-tab-1,
          .base-tab-3,
          .base-tab-5,
          .base-tab-7 {
            background: #eeeeee;
          }
        }
      }
    }
  }
  .is-active {
    color: #00bfff;
    border-top: 6px solid #00bfff;
    border-radius: 3px 3px 0 0;
  }
  .co-mon {
    height: 350px;
  }
  .mon-title {
    width: 98%;
    .mon-reg {
      width: 120px;
    }
    .mon-content {
      margin-left: 20px;
      .mon-position {
        width: 80px;
      }
      .address-input {
        width: 480px;
      }
    }
    .com-input {
      border: 0;
    }
    .mon-btnBox {
      // width: 180px;
      .mon-btn {
        margin: 14px 0 0 0;
        width: 100px;
        height: 46px;
      }
    }
  }
}
</style>
